<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: rgb(230, 17, 17);
        }
        .one {
            text-align: left;
            text-decoration: none;
        }

        .two {
            text-align: right;
            text-decoration: underline;
        }

        .three {
            text-align: center;
            text-decoration: overline;
        }
        .four {
            text-decoration: line-through;
        }

        #indent {
            text-indent: 2em;
        }

        #line-height {
            height: 100px;
            background-color: yellowgreen;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <p>时代开始的建设靠大家</p>

    <h2>div对齐</h2>
    <div class="one">左对齐</div>
    <div class="two">右对齐</div>
    <div class="three">居中对齐</div>

    <h2>span对齐</h2>
    <span class="one">左对齐</span>
    <br>
    <span class="two">右对齐</span>
    <br>
    <span class="three">居中对齐</span>
    
    <h2>文本装饰</h2>
    <div class="one">啥都没有</div>
    <div class="two">下划线</div>
    <div class="three">上划线</div>
    <div class="four">删除线</div>

    <h2>文本缩进</h2>
    <p id="indent">文本缩进2em</p>

    <h2>行高</h2>
    <div id="line-height">四道口附近<br>三款发动机</div>
</body>
</html>
<!--
    ###
    text-align：值----》文本对齐
    left center right
    ###
    text-decoration：值 ---》文本装饰
    none underline overline line-through
    一般用于a链接标签去除默认的下滑线
    ###
    text-indent：值---》文本缩进
        ** rem
    ###
    line-hight：值
    最多使用的场景：将文本垂直居中
    方法：文本所在的元素，行高设置为该元素的高度